<template>
  <div class="group-panel">
    <el-drawer
      v-model="showDrawer"
      modal-class="mask-style"
      :title="groupInfo.name"
      :size="250"
    >
      <div class="group-panel-body">
        <div class="line"></div>
        <div class="cluster-info">
          <div class="cluster-name">
            <span class="title"
              >群组ID号<span class="name">{{ groupInfo.clusterId }}</span></span
            >
          </div>
          <div class="cluster-name">
            <span class="title"
              >群组名称<span class="name">{{ groupInfo.name }}</span></span
            >
          </div>
          <div class="cluster-name">
            <span class="title"
              >群组公告<span class="name">{{
                groupInfo.notice === "" ? "暂无公告" : groupInfo.notice
              }}</span></span
            >
          </div>
        </div>
        <div class="line"></div>
        <div class="search">
          <el-input v-model="searchNickname" size="small" placeholder="搜索" clearable />
        </div>
        <div class="member-list">
          <template v-if="userInfoStore.getInfo().userId == groupInfo.ownerId">
            <div class="member-item-icon" @click="addUser">
              <div class="iconfont icon-jia"></div>
              <div class="add">添加成员</div>
            </div>
            <div class="member-item-icon" @click="removeUser">
              <div class="iconfont icon-jianqu"></div>
              <div class="add">删除成员</div>
            </div>
          </template>
          <div
            class="member-item"
            v-for="item in memberList"
            v-show="item.contactName.includes(searchNickname)"
          >
            <div class="user-icon">
              <UserIcon
                :src="item.contactIcon"
                :userId="item.contactId"
                :width="35"
                @closeDrawer="closeDrawerHandler"
              />
            </div>
            <div class="username" :title="item.contactName">{{ item.contactName }}</div>
            <i class="iconfont icon-qunzhu" v-if="item.role === 2"></i>
          </div>
        </div>
        <div class="line"></div>
        <a
          href="javascript:void(0)"
          class="leave-btn"
          @click="dissolutionGroup"
          v-if="userInfoStore.getInfo().userId == groupInfo.ownerId"
          >解散群组</a
        >
        <a href="javascript:void(0)" class="leave-btn" @click="leaveGroup" v-else
          >退出群组</a
        >
      </div>
    </el-drawer>
    <AddOrRemoveUser ref="userSelectRef" @callback="addOrRemoveUserCallback" />
  </div>
</template>

<script setup>
import AddOrRemoveUser from "./AddOrRemoveUser.vue";
import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
import { useUserInfoStore } from "@/stores/UserInfoStore";
const userInfoStore = useUserInfoStore();

const searchNickname = ref("");
const showDrawer = ref(false);
const memberList = ref([]);
const groupInfo = ref({});
const show = async (clusterId) => {
  showDrawer.value = true;
  const params = {
    clusterId: clusterId,
  };
  const res = await proxy.Api.queryClusterUserChatByClusterId(params);
  if (res.code !== 200) {
    proxy.$message.error(res.messgae);
    return;
  } else {
    groupInfo.value = res.data.cluster;
    memberList.value = res.data.clusterUserVoList;
  }
};
defineExpose({
  show,
});

const closeDrawerHandler = () => {
  showDrawer.value = false;
};

const userSelectRef = ref();
const addUser = async () => {
  const res = await proxy.Api.queryUserContactList();
  const contactIds = memberList.value.map((item) => item["contactId"]);
  let contactList = res.data;
  contactList.forEach((element) => {
    if (contactIds.includes(element.contactId)) {
      element.disabled = true;
    }
  });
  userSelectRef.value.show({
    contactList,
    clusterId: groupInfo.value.clusterId,
    opType: 1,
  });
};

const removeUser = async () => {
  let contactList = memberList.value.filter((item) => item.role == 1);
  userSelectRef.value.show({
    contactList,
    clusterId: groupInfo.value.clusterId,
    opType: 0,
  });
};

const addOrRemoveUserCallback = () => {
  showDrawer.value = false;
};

const params = ref({});
const leaveGroup = () => {
  proxy.Confirm({
    message: "确定要退出群组吗？",
    okfun: async () => {
      params.value.clusterId = groupInfo.value.clusterId;
      const res = await proxy.Api.leaveCluster(params.value);
      if (res.code !== 200) {
        proxy.$message.error(res.message);
        return;
      } else {
        proxy.$message.success("已退出");
        showDrawer.value = false;
      }
    },
  });
};

const dissolutionGroup = () => {
  proxy.Confirm({
    message: "确定要解散群组吗？",
    okfun: async () => {
      params.value.clusterId = groupInfo.value.clusterId;
      const res = await proxy.Api.dissolutionCluster(params.value);
      if (res.code !== 200) {
        proxy.$message.error(res.message);
        return;
      } else {
        proxy.$message.success("已解散");
        showDrawer.value = false;
      }
    },
  });
};
</script>

<style lang="scss" scoped>
.group-panel {
  color: #000000;
  :deep(.el-drawer) {
    -webkit-app-region: no-drag;
  }
  :deep(.el-drawer__header) {
    margin-bottom: 10px;
  }
  :deep(.el-drawer__body) {
    padding: 10px;
  }

  :deep(.el-drawer__body::-webkit-scrollbar) {
    display: none;
  }

  .group-panel-body {
    .cluster-info {
      display: flex;
      flex-direction: column;

      .cluster-name {
        display: flex;
        flex-direction: column;
        margin-bottom: 5px;
        .title {
          font-size: 12px;
          font-weight: 600;
        }
        .name {
          margin-left: 5px;
          font-size: 11px;
          color: #555;
          font-weight: 400;
        }
      }
    }
    .search {
      margin-bottom: 5px;
    }
    .member-list {
      display: flex;
      flex-direction: column;

      .member-item-icon {
        display: flex;
        margin-bottom: 10px;

        .iconfont {
          cursor: pointer;
          background: #eaeaea;
          width: 25px;
          height: 25px;
          border-radius: 5px;
          font-size: 15px;
          padding: 10px 0px 0px 10px;
        }
        .add {
          margin-top: 9px;
          margin-left: 10px;
          font-size: 12px;
          font-weight: 600;
        }
      }

      .member-item {
        display: flex;
        align-items: center;
        margin-bottom: 5px;

        .user-icon {
          cursor: pointer;
        }
        .username {
          margin-bottom: 8px;
          margin-left: 10px;
          font-size: 12px;
          font-weight: 600;
        }
        .iconfont {
          font-size: 20px;
          margin-left: 120px;
          margin-bottom: 6px;
        }
      }
    }

    .line {
      margin-bottom: 5px;
      border-top: 1px solid #ddd;
      height: 1px;
    }

    .leave-btn {
      color: #f45454;
      text-decoration: none;
      text-align: center;
      display: block;
      margin-top: 5px;
      font-weight: 600;
      font-size: 12px;
    }
  }
}
</style>
